<template>
    <div class="main" style="margin-bottom: 20px;margin-top:  20px;">
        <el-form :model="queryParams" ref="elForm" size="medium" :inline="true" label-width="100px">
            <el-form-item label="插座编号" prop="deviceId">
                <el-input v-model="queryParams.deviceId" placeholder="请输入插座编号" show-word-limit clearable
                    :style="{ width: '150px' }"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="devModelType">
                <el-select v-model="queryParams.devModelType" placeholder="请选择设备型号" clearable
                    :style="{ width: '180px' }">
                    <el-option v-for="(item, index) in modelList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="设备分组" prop="devGroupId">
                <el-select v-model="queryParams.devGroupId" placeholder="请选择设备分组" clearable
                    :style="{ width: '180px' }">
                    <el-option v-for="(item, index) in groupDict" :key="index" :label="item.devGroupName"
                        :value="item.devGroupId"></el-option>
                </el-select>
            </el-form-item>
            <!--
            <el-form-item label="所属客户" prop="customerId">
                <el-input v-model="queryParams.customerId" placeholder="请输入所属客户" show-word-limit clearable
                    :style="{ width: '150px' }"></el-input>
            </el-form-item>
            -->
            <el-form-item label="是否置顶" prop="jobGroup">
                <el-select
                    v-model="queryParams.isTop"
                    placeholder="是否置顶"
                    clearable
                    :style="{ width: '150px' }"
                >
                    <el-option label="是" value="Y"></el-option>
                    <el-option label="否" value="N"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="info" icon="el-icon-upload" size="medium" @click="upLevelForm">批量升级</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <!-- <el-col :span="4" :xs="24">
                <div>
                    <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
                        prefix-icon="el-icon-search" style="margin-bottom: 20px" />
                </div>
                <div>
                    <el-tree :data="areaInfoList" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" />
                </div>
            </el-col> -->
            <el-col :span="24" :xs="24">
                <el-table :data="devInfoList" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="80" align="center">
                    </el-table-column>
                    <el-table-column fixed prop="deviceId" label="插座编号" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="devName" label="设备别名" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="typeName" label="设备类型" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="devModelTypeName" label="设备型号" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="isTop" label="是否置顶" width="120" align="center">
                        <template slot-scope="scope">
                            <el-tag type="primary" v-if="scope.row.isTop == 'Y'">{{computedIsTop(scope.row.isTop)}}</el-tag>
                            <el-tag type="info" v-if="scope.row.isTop == 'N'">{{computedIsTop(scope.row.isTop)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sectionName" label="归属公司" width="120" align="center">
                    </el-table-column>
                    <!--
                    <el-table-column prop="customerName" label="归属人" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="areaName" label="归属区域" width="120" align="center">
                    </el-table-column>
                    -->
                    <el-table-column prop="devGroupName" label="归属分组" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="addTime" label="添加时间" width="220" align="center" :formatter="parseTime"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="actTime" label="激活时间" width="120" align="center"
                        :show-overflow-tooltip="true" :formatter="parseTime1">
                    </el-table-column>
                    <el-table-column prop="routerMac" label="连接路由器" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="devVersion" label="版本信息" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="120" align="center">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>

                            <el-button type="text" size="small" v-if="scope.row.isTop=='N'" @click="changeTop('Y', scope.row.deviceId)">置顶</el-button>
                            <el-button type="text" size="small" v-if="scope.row.isTop=='Y'" @click="changeTop('N', scope.row.deviceId)">取消置顶</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getDevInfoList" />
        </el-row>


        <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="editForm" size="medium">
                <el-form-item label="设备编号" :label-width="formLabelWidthByedit">
                    <el-input v-model="editForm.deviceId" :disabled="true" :style="{ width: '350px' }"></el-input>
                </el-form-item>
                <el-form-item label="设备别名" :label-width="formLabelWidthByedit">
                    <el-input @input="$forceUpdate()" v-model="editForm.devName" :style="{ width: '350px' }"></el-input>
                </el-form-item>
                <el-form-item label="设备型号" :label-width="formLabelWidthByedit">
                    <el-select @change="$forceUpdate()" v-model="editForm.devModelType" :style="{ width: '350px' }">
                        <el-option v-for="item in modelList" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="设备分组" :label-width="formLabelWidthByedit">
                    <el-select @change="$forceUpdate()" v-model="editForm.devGroupId" :style="{ width: '350px' }">
                        <el-option v-for="item in groupDict" :key="item.devGroupId" :label="item.devGroupName"
                            :value="item.devGroupId"></el-option>
                    </el-select>
                </el-form-item>
                <!--
                <el-form-item label="归属区域" :label-width="formLabelWidthByedit">
                    <el-select @change="$forceUpdate()" v-model="editForm.regionId" :style="{ width: '350px' }">
                        <el-option v-for="item in areaInfoListByEdit" :key="item.menuId" :value="item.menuId"
                            :label="item.menuName"></el-option>
                    </el-select>
                </el-form-item>
                -->
                <el-form-item label="归属公司" :label-width="formLabelWidthByedit">
                    <el-select @change="$forceUpdate()" v-model="editForm.sectionId" :style="{ width: '350px' }">
                        <el-option v-for="item in deptInfoList" :key="item.deptId" :value="item.deptId"
                            :label="item.deptName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthByedit">
                    <el-input @input="$forceUpdate()" v-model="editForm.remark" :style="{ width: '350px' }"></el-input>
                </el-form-item>
                <el-form-item label="保存历史记录" label-width="auto" class="custom-label-alignment">
                    <el-switch v-model="editChecked"></el-switch>

                    <!-- <el-checkbox v-model="editChecked"></el-checkbox> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="isWellFormed()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="下发升级" :visible.sync="upLevelVisible">
            <el-form>
                <el-form-item label="升级地址" :label-width="formLabelWidth">
                    <el-input v-model="upUrl" autocomplete="off" display="display"
                        placeholder="http://business.alm-iot.com/upgradeDownload/升级包名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="upLevelVisible = false">取 消</el-button>
                <el-button type="primary" @click="upLevelSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

import { getDevInfoList, getModelList, submitEditForm, getModelListByType, upLevelSubmit } from "@/api/alm/dev-debug/dev-network-manage/dev-network-manage";
import { getAreaList, getAreaInfo, delArea, addArea, updateArea, getDeptList } from "@/api/alm/statistical-export/area-manage/area-manage";
import { editIsTop } from "@/api/alm/dev-base-info/dev-base-info-manage/dev-base-info-manage"
import { getGroupDict } from "@/api/alm/dev-group/dev-group";
import { getType } from "@/api/devTypeMap";
import { parseTime } from "@/utils/ruoyi";
export default {
    components: {},
    props: [],
    data() {
        return {
            devInfoList: [],
            devSelectionList: '',
            areaInfoList: [],
            devInfoMap: {},
            modelList: [],
            groupDict: [],
            deptInfoList: [],
            dialogFormVisible: false,
            editForm: {
                deviceId: '',
                devModelType: '',
                remark: ''
            },
            editChecked: false,
            formLabelWidth: '120px',
            formLabelWidthByedit: '80px',
            upLevelVisible: false,
            upUrl: '',
            defaultProps: {
                children: "children",
                label: "menuName"
            },
            areaName: '',
            areaInfoListByEdit: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ipaddr: undefined,
                userName: undefined,
                status: undefined,
                isTop: undefined,
            },
            dateRange: [],

            isTopMap: {}
        }
    },

    computed: {
        computedIsTop() {
            return function(value) {
                return this.isTopMap.get(value)
            }
        }
    },

    watch: {
        // 根据名称筛选公司树
        areaName(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        this.isTopMap = new Map();
        this.isTopMap.set("N", "否");
        this.isTopMap.set("Y", "是");

        this.devInfoMap = new Map;
        this.getDevInfoList();
        this.getModelList();
        this.getDeptInfoList();
        this.getAreaInfoList();
        this.getDevGroupDict();
    },
    deactivated() {
    },
    mounted() {
    },
    methods: {

        changeTop(isTop, devMac) {
            let editParams = {};
            editParams.isTop = isTop;
            editParams.devMac = devMac;
            editIsTop(editParams).then(res => {
                if(res.code == 200) {
                    this.queryParams.pageNum = 1;
                    this.queryParams.pageSize = 10;
                    this.getDevInfoList();
                }
            })
        },

        handleClick(row) {
            console.log('row', row);
            this.editForm = {}
            this.dialogFormVisible = true
            this.editForm.id = row.id
            this.editForm.deviceId = row.deviceId
            this.editForm.devName = row.devName
            this.editForm.remark = row.remark
            this.editChecked = (row.saveHis === 1)
            this.editForm.devModelType = row.devModelType
            this.editForm.regionId = row.regionId
            this.editForm.sectionId = row.sectionId
            this.editForm.devGroupId = row.devGroupId
        },
        getDevInfoList() {
            getDevInfoList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.devInfoList = response.rows;
                this.total = response.total;
            });
        },
        parseTime(params) {
            return parseTime(params.addTime);
        },
        parseTime1(params) {
            return parseTime(params.actTime);
        },
        getModelList() {
            getModelList({}).then(response => {
                this.modelList = response.rows;
            })
        },

        getDevGroupDict() {
            getGroupDict({}).then(res => {
                this.groupDict = res.data
            })
        },

        isWellFormed() {
            this.submitEditForm()
        },

        submitEditForm() {
            if (this.editChecked) {
                this.editForm.saveHis = 1;
            } else {
                this.editForm.saveHis = 0;
            }
            console.log('this.editForm ', this.editForm);
            this.dialogFormVisible = false
            submitEditForm(this.editForm).then(response => {
                if (response.code == 200) {
                    if (response.data) {
                        this.$message.success('修改成功！');
                        this.getDevInfoList()
                    } else {
                        this.$message.error('修改失败！');
                    }
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },

        submitForm(e) {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return;
                this.getDevInfoList(this.queryParams)
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
            this.getDevInfoList()
        },

        upLevelForm() {
            if (this.devSelectionList === '') {
                return this.$message.error('请选择设备！');
            } else {
                this.upLevelVisible = true
            }
        },

        upLevelSubmit() {
            let obj = {}
            obj.devMacs = []
            this.devSelectionList.forEach(item => {
                // this.devSelectionList += item.deviceId + ',';
                console.log(item)
                obj.devMacs.push(item.deviceId)
            })
            obj.upUrl = this.upUrl
            upLevelSubmit(obj).then(response => {
                console.log('response ', response);
                if (response.code == 200) {
                    this.$message.success(response.msg)
                }
            })
        },

        handleSelectionChange(e) {
            this.devSelectionList = [];
            console.log(e)
            e.forEach(item => {
                // this.devSelectionList += item.deviceId + ',';
                this.devSelectionList.push(item)
            })
        },

        getDeptInfoList() {
            getDeptList({}).then(response => {
                this.deptInfoList = response.data
            })
        },

        getAreaInfoList() {
            getAreaList({}).then(response => {
                this.areaInfoList = this.handleTree(response.data, "menuId");
                this.areaInfoListByEdit = response.data
            })
        },

        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.menuName.indexOf(value) !== -1;
        },

        // 节点单击事件
        handleNodeClick(data) {
            if (data === null || data.menuId === null) {
                return this.$message.error('查询失败');
            }
            this.queryParams.regionId = data.menuId;
            this.getDevInfoList(this.queryParams)
        }
    }
};
</script>

<style scoped>
.main {
    /* width: 100%;
    padding: 2%; */
}

.custom-label-alignment .el-form-item__label {
    text-align: left !important;
}

.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label {
    text-align: left !important;
}
</style>